<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="../lib/vue.min.js"></script>
</head>
<body>
    <div id="box">
      <input type="checkbox" @change="handleChange" v-model="isAllChecked"/>
      <ul>
        <li v-for="data in datalist" :key="data.id">
          <input type="checkbox" v-model="checkgroup" :value="data" @change="handleItemChange"/>
          {{data}}
          <button @click="handleDelClick(data)">del</button>
          <span><input type="number" v-model="data.number"/></span>
          <button @click="data.number++">add</button>
        </li>
      </ul>
      {{checkgroup}}

      <p>总金额计算 {{getSum()}}</p>

      <p>总金额计算-计算属性- {{getComputedSum}}</p>
      
    </div>
   
    <script type="text/javascript">
    	
    	var vm = new Vue({
    		el:"#box",

    		data:{
              checkgroup:[],
              isAllChecked:false,
              datalist:[
                {
                  name:"商品1",
                  price:10,
                  number:1,
                  id:"1",
                  // url:"https://www.baidu.com/img/bd_logo1.png?qua=high"
                },
                {
                  name:"商品2",
                  price:20,
                  number:2,
                  id:"2",
                  // url:"https://www.baidu.com/img/bd_logo1.png?qua=high"
                },
                {
                  name:"商品3",
                  price:30,
                  number:3,
                  id:"3",
                  // url:"https://www.baidu.com/img/bd_logo1.png?qua=high"
                }

              ]
    		},

        computed: {
            getComputedSum(){
            // return "11111111";
            // 购物车勾选的数据累加
            var sum = 0;

            for(var i in this.checkgroup){
              sum+=this.checkgroup[i].number*this.checkgroup[i].price;
            }
            return sum;
          }
        },
        methods:{
          handleChange(){
            console.log("handleChange",this.isAllChecked)
            if(this.isAllChecked){
              this.checkgroup=this.datalist
            }else{
              this.checkgroup = [];
            }
          },

          handleItemChange(){
            console.log("handleItemChange")
            if(this.checkgroup.length===this.datalist.length){
              this.isAllChecked = true;
            }else{
              this.isAllChecked = false;
            }
          },

          getSum(){
            // return "11111111";
            // 购物车勾选的数据累加
            var sum = 0;

            for(var i in this.checkgroup){
              sum+=this.checkgroup[i].number*this.checkgroup[i].price;
            }
            return sum;
          },

          handleDelClick(data){
            data.number--

            if(data.number===0){
              data.number=1
            }
          }
        }  

    	})

    </script>
</body>
</html>